<template>
  <ul class="goods-sales">
    <li>
      <p>销量人气</p>
      <p>200+</p>
      <p><i class="iconfont icon-task-filling" />销量人气</p>
    </li>
    <li>
      <p>商品评价</p>
      <p>400+</p>
      <p><i class="iconfont icon-comment-filling" />查看评价</p>
    </li>
    <li>
      <p>收藏人气</p>
      <p>600+</p>
      <p><i class="iconfont icon-favorite-filling" />收藏商品</p>
    </li>
    <li>
      <p>品牌信息</p>
      <p>苏宁电器</p>
      <p><i class="iconfont icon-dynamic-filling" />品牌主页</p>
    </li>
  </ul>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.goods-sales {
  display: flex;
  align-items: center;
  width: 400px;
  height: 140px;
  text-align: center;

  li {
    position: relative;
    flex: 1;

    ~ li::after {
      position: absolute;
      top: 10px;
      left: 0;
      height: 60px;
      content: "";
      border-left: 1px solid #e4e4e4;
    }

    p {
      &:first-child {
        color: #999;
      }

      &:nth-child(2) {
        margin-top: 10px;
        color: $priceColor;
      }

      &:last-child {
        margin-top: 10px;
        color: #666;

        i {
          margin-right: 2px;
          font-size: 14px;
          color: $xtxColor;
        }

        &:hover {
          color: $xtxColor;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
